<template>
  <div
    class="hero-trade-selector"
    ref="selector"
  >
    <div class="panel-wrap">
      <div class="panel">
        <div class="main-area">
          <div class="sidebar">
            <div
              class="sidebar-item"
              :class="sidebarChecked === 0 ? 'active' : ''"
              @click.stop="sidebarChecked = 0"
            >
              <i v-show="checkedSkinIds.length > 0"></i>
              <span>英雄皮肤</span>
            </div>
            <div
              class="sidebar-item"
              :class="sidebarChecked === 1 ? 'active' : ''"
              @click.stop="sidebarChecked = 1"
            >
              <i v-show="checkedJobLevels.length > 0"></i>
              <span>段位筛选</span>
            </div>
            <div
              class="sidebar-item"
              :class="sidebarChecked === 2 ? 'active' : ''"
              @click.stop="sidebarChecked = 2"
            >
              <i v-show="!hasUserRange()"></i>
              <span>区间筛选</span>
            </div>
            <div
              class="sidebar-item"
              :class="sidebarChecked === 3 ? 'active' : ''"
              @click.stop="sidebarChecked = 3"
              v-if="type !== 'rent'"
            >
              <i v-show="checkedLevels.length > 0"></i>
              <span>贵族等级</span>
            </div>
          </div>
          <div class="content">
            <!-- 英雄皮肤选择器 -->
            <div class="hero-selector-content" v-if="sidebarChecked === 0">
              <div class="content-header">
                <div class="wrap">
                  <div
                    class="job-item"
                    :class="
                      checkedHeroJobs.careerId === heroJob.careerId
                        ? 'active'
                        : ''
                    "
                    v-for="heroJob in heroJobs"
                    :key="heroJob.careerId"
                    @click.stop="checkedHeroJobs = heroJob"
                  >
                    {{ heroJob.careerName }}
                  </div>
                </div>
              </div>
              <div class="content-main">
                <div
                  class="hero-item-row"
                  v-for="(heroGroup, index) in subArrayGroupHeros(
                    checkedHeroJobs.heros
                  )"
                  :key="'heroRow' + index"
                  :class="inHeroGroup(heroGroup) ? 'selected' : ''"
                >
                  <div
                    class="hero-item"
                    v-for="hero in heroGroup"
                    :key="hero.heroId"
                    @click.stop="setSelectdHero(hero)"
                    :class="[
                      selectedHero && selectedHero.heroId === hero.heroId
                        ? 'selected'
                        : '',
                      heroCheckedSkinLength(hero) > 0 ? 'checked' : '',
                    ]"
                  >
                    <div class="hero-icon">
                      <img :src="hero.icon" :alt="hero.name" />
                      <div class="count-wrap">
                        {{ heroCheckedSkinLength(hero) }}
                      </div>
                    </div>
                    <span>{{ hero.name }}</span>
                  </div>
                  <div
                    class="skin-wrap"
                    :style="`height: ${getSkinWrapHeight(heroGroup)}px`"
                    v-if="selectedHero && selectedHero.skins"
                  >
                    <div
                      class="hero-item"
                      v-for="skin in selectedHero.skins"
                      :key="skin.skinId"
                      @click.stop="checkSkin(selectedHero, skin)"
                      :class="skinChecked(skin) ? 'checked' : ''"
                    >
                      <div class="hero-icon">
                        <img :src="skin.icon" :alt="skin.name" />
                        <div class="label-icon" v-if="skin.labelIcon">
                          <img :src="skin.labelIcon" alt="" />
                        </div>
                      </div>
                      <span>{{ skin.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 英雄皮肤选择器 end -->
            <!-- 段位筛选 -->
            <div class="dw-selector-content" v-if="sidebarChecked === 1">
              <div
                :class="['dw-list', { 'dw-list-active': item.checked }]"
                v-for="(item, index) in jobLevels"
                :key="index"
                @click="selectDw(item)"
              >
                <img :src="item.checked ? item.pic : item.grayPic" />
                <div
                  class="title"
                  :style="{
                    color: item.checked
                      ? 'rgba(0, 191, 60, 1)'
                      : 'rgba(28, 32, 44, 0.6)',
                  }"
                >
                  {{ item.jobName }}
                </div>
              </div>
            </div>
            <!-- 段位筛选 end -->
            <!-- 区间筛选 -->
            <div class="range-selector-content" v-if="sidebarChecked === 2">
              <div class="block-item">
                <div class="range-text-wrap">
                  <span class="title">价格区间</span>
                  <div
                    class="value price"
                  >最高可填价格 {{(priceRange.max)}} <span>元</span>
                  </div>
                </div>
                <div class="select-input">
                  <span>最低价格：</span>
                  <el-input v-model="priceMin" />
                  <span>最高价格：</span>
                  <el-input v-model="priceMax" />
                </div>
              </div>
              <div class="block-item">
                <div class="range-text-wrap">
                  <span class="title">英雄数量</span>
                  <div class="value">
                    最大可填数量：{{ heroCountRange.max }}
                  </div>
                </div>
                <div class="select-input">
                  <span>最小数量：</span>
                  <el-input v-model="heroMin" />
                  <span>最大数量：</span>
                  <el-input v-model="heroMax" />
                </div>
              </div>
              <div class="block-item">
                <div class="range-text-wrap">
                  <span class="title">皮肤数量</span>
                  <div class="value">
                    最大可填数量：{{ skinCountRange.max}}
                  </div>
                </div>
                <div class="select-input">
                  <span>最小数量：</span>
                  <el-input v-model="skinMin" />
                  <span>最大数量：</span>
                  <el-input v-model="skinMax" />
                </div>
              </div>
            </div>
            <!-- 区间筛选 end -->

            <!-- 贵族等级选择器 -->
            <div class="level-selector-content" v-if="sidebarChecked === 3">
              <div
                class="level-selector"
                :class="levelChecked(level) ? 'active' : ''"
                v-for="level in vipLevels"
                :key="level.level"
                @click.stop="checkLevel(level)"
              >
                {{ level.desc }}
              </div>
            </div>
            <!-- 贵族等级选择器 end -->
          </div>
        </div>
        <div class="bottom-area">
          <div class="reset-btn" @click.stop="resetSelector">重置</div>
          <div class="enter-btn" @click.stop="selectorSubmit">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { subArrayGroup } from "@/utils/utils.js";

export default {
  name: 'WzSelctor',
  props: {
    pageType: {
      type: String,
      default: "hero",
    },
    offsetTop: Number,
    type: String,
    editSelectorInfo: Object
  },
  data() {
    return {
      showSort: false,
      showFilter: false,
      sidebarChecked: 0,
      sortItems: [
        {
          id: 0,
          title: "推荐排序",
        },
        {
          id: 1,
          title: "低价优先",
        },
        {
          id: 2,
          title: "高价优先",
        },
      ],
      sortChecked: {
        id: 0,
        title: "推荐排序",
      },
      conditionsString: "道具筛选",

      // 区间范围筛选器
      priceRange: {
        // 价格可选范围
        max: 0,
        min: 0,
      },
      priceRangeValue: [0, 38794], // 价格range model
      heroCountRange: {
        // 英雄数量可选范围
        max: 0,
        min: 0,
      },
      heroRangeValue: [0, 105], // 英雄数量range model
      skinCountRange: {
        // 皮肤数量可选范围
        max: 0,
        min: 0,
      },
      skinRangeValue: [0, 446], // 皮肤数量range model

      // 贵族等级筛选器
      vipLevels: [], // 贵族等级
      checkedLevels: [], // 选中的贵族等级

      // 英雄皮肤筛选器
      allSkins: [],
      heroJobs: [], // 全职业英雄
      checkedHeroJobs: {
        // 职业划分英雄列表
        careerId: 100,
        careerName: "坦克",
        heros: [],
      },
      checkedSkinIds: [],
      checkedSkinNames: [],
      selectedHero: null,
      fixed: 0,

      // 单位筛选器
      jobLevels: [], // 段位list
      checkedJobLevels: [], // 选中的贵族等级
      priceMax: '',
      priceMin: '',
      heroMax: '',
      heroMin: '',
      skinMax: '',
      skinMin: ''
    };
  },

  created() {
    this.getSelectorData();

    // 后台下单 默认价格最低
    if (this.$route.query.source === "admin") {
      this.sortChecked = {
        id: 1,
        title: "低价优先",
      };
    }
  },

  watch:  {
    editSelectorInfo: {
      handler(val) {
        if (JSON.stringify(val) !== '{}') {
          this.resetSelector()
          this.getSelectorData(() => {
            this.getEditData(val)
          })
        }
      },
      immediate: true
    }
  },
  mounted() {
  },

  methods: {

    // 编辑筛选器赋值
    getEditData (val) {
      console.log(val, '000')
      // 英雄皮肤反选
      if (val.skinIds) {
        this.checkedSkinIds = val.skinIds
      }
      // 段位反选
      if (val.jobLevels) {
        this.jobLevels.forEach((level) => {
          this.$set(level, 'checked', false) 
          val.jobLevels.forEach((s) => {
            if (level.jobLevel === s) {
              this.$set(level, 'checked', true) 
            }
          })
        })
      }
      // 价格趣宝石反选
      if (val.gemRange) {
        // this.priceRangeValue = [val.priceRange.min, val.priceRange.max]
        this.priceMax = (val.gemRange.max / 100)
        this.priceMin = (val.gemRange.min / 100)
      }
      // 英雄数量反选
      if (val.heroCountRange) {
        // this.heroRangeValue = [val.heroCountRange.min, val.heroCountRange.max]
        this.heroMax = val.heroCountRange.max
        this.heroMin = val.heroCountRange.min
      }
      // 皮肤数量反选
      if (val.skinCountRange) {
        // this.skinRangeValue = [val.skinCountRange.min, val.skinCountRange.max]
        this.skinMax = val.skinCountRange.max
        this.skinMin = val.skinCountRange.min
      }
    },

    getValue(percent, range) {
      return (percent / 100) * (range.max - range.min) + range.min;
    },

    hasUserRange() {
      const priceUnlimited =
        this.getRangeValue(this.priceRangeValue, this.priceRange) === "不限";
      const heroUnlimited =
        this.getRangeValue(this.heroRangeValue, this.heroCountRange) === "不限";
      const skinUnlimited =
        this.getRangeValue(this.skinRangeValue, this.skinCountRange) === "不限";
      return priceUnlimited && heroUnlimited && skinUnlimited;
    },

    getRangeValue(rangeValue, range) {
      if (rangeValue[0] === 0 && rangeValue[1] === 100) {
        return "不限";
      }
      const min = this.getValue(rangeValue[0], range);
      const max = this.getValue(rangeValue[1], range);
      return `${Math.floor(min)}-${Math.floor(max)}`;
    },

    onSliderChange() {
      this.getConditionsString();
    },

    // 获取筛选器全部数据
    async getSelectorData(callback) {
      let selectorRes = await this.$http.get("https://api-game.duodian.cn/api/deal/wzSelector");
      if (selectorRes.code !== "0") {
        this.$message({
          type: 'error',
          message: selectorRes.desc
        })
        return false;
      }
      // 价格区间
      this.priceRange = selectorRes.data.priceRange;
      // 英雄数量
      this.heroCountRange = selectorRes.data.heroCountRange;
      // 皮肤数量
      this.skinCountRange = selectorRes.data.skinCountRange;
      // 贵族等级
      this.vipLevels = selectorRes.data.vipLevels;
      // 英雄列表
      this.heroJobs = selectorRes.data.heroCareerSkins;
      this.checkedHeroJobs = this.heroJobs[0];
      // 段位列表
      this.jobLevels = selectorRes.data.jobLevels;
      this.jobLevels.forEach((item) => {
        this.$set(item, "checked", false);
      });

      const allHeros = this.heroJobs.reduce((heros, item) => {
        return heros.concat(item.heros);
      }, []);

      this.allSkins = allHeros.reduce((skins, hero) => {
        return skins.concat(hero.skins);
      }, []);

      const labelSkins = this.allSkins.filter((skin) => {
        return skin.selectorLabel;
      });
      // 编辑时 先调用接口，获取到数据后在编辑
      if (typeof callback === 'function') {
        callback()
      }
      this.$emit("updateSelectorLabelSkins", labelSkins);
    },

    // 判断贵族等级是否被选中
    levelChecked(level) {
      return this.checkedLevels.includes(level.level);
    },

    // 点击选中或取消选中贵族等级
    checkLevel(level) {
      if (this.levelChecked(level)) {
        // 取消贵族等级选择
        this.checkedLevels.splice(this.checkedLevels.indexOf(level.level), 1);
      } else {
        // 选择贵族等级
        this.checkedLevels.push(level.level);
      }
      this.getConditionsString();
    },
    // 分割英雄列表
    subArrayGroupHeros(heros) {
      return subArrayGroup(heros, 5);
    },
    // 判断英雄是否被选中
    heroCheckedSkinLength(hero) {
      if (!hero.skins) return 0;
      const ownSkinIds = hero.skins.map((skin) => skin.skinId);
      return ownSkinIds.filter((id) => this.checkedSkinIds.includes(id)).length;
    },
    // 判断皮肤是否被选中
    skinChecked(skin) {
      return this.checkedSkinIds.includes(skin.skinId);
    },
    // 点击选中或取消选中皮肤
    checkSkin(hero, skin) {
      if (this.skinChecked(skin)) {
        // 取消皮肤选择
        if (skin.required === 1) {
          // 取消经典皮肤要取消该英雄所有皮肤
          const regx = RegExp("^" + skin.skinId.toString().substr(0, 3));
          this.checkedSkinIds = this.checkedSkinIds.filter(
            (id) => !regx.test(id)
          );
        } else {
          this.checkedSkinIds.splice(
            this.checkedSkinIds.indexOf(skin.skinId),
            1
          );
        }
      } else {
        // 选择皮肤
        if (skin.required === 0) {
          // 选择普通皮肤将经典皮肤勾选
          const requiredSkins = hero.skins.filter(
            (_skin) => _skin.required === 1
          );
          this.checkedSkinIds.push(
            ...requiredSkins.map((_skin) => _skin.skinId)
          );
        }
        this.checkedSkinIds.push(skin.skinId);
      }

      this.getConditionsString();
    },
    // 获取筛选器已选择条件文字
    getConditionsString() {
      const stringArray = [];
      if (
        this.getRangeValue(this.priceRangeValue, this.priceRange) !== "不限"
      ) {
        // 价格区间
        stringArray.push(
          this.getRangeValue(this.priceRangeValue, this.priceRange)
        );
      }
      if (
        this.getRangeValue(this.heroRangeValue, this.heroCountRange) !== "不限"
      ) {
        // 英雄数量区间
        stringArray.push(
          `英雄${this.getRangeValue(this.heroRangeValue, this.heroCountRange)}`
        );
      }
      if (
        this.getRangeValue(this.skinRangeValue, this.skinCountRange) !== "不限"
      ) {
        // 皮肤数量区间
        stringArray.push(
          `皮肤${this.getRangeValue(this.skinRangeValue, this.skinCountRange)}`
        );
      }
      if (this.checkedLevels.length > 0) {
        // 贵族等级
        stringArray.push(
          `贵族${Math.min(...this.checkedLevels)}-${Math.max(
            ...this.checkedLevels
          )}`
        );
      }
      if (this.checkedJobLevels.length > 0) {
        // 段位筛选
        this.jobLevels.forEach((job) => {
          this.checkedJobLevels.forEach((item) => {
            if (job.jobLevel === item) {
              stringArray.push(job.jobName);
            }
          });
        });
      }
      if (this.getAllCheckedSkinsName() !== "") {
        stringArray.push(this.getAllCheckedSkinsName());
      }
      if (stringArray.length === 0) {
        this.conditionsString = "道具筛选";
      } else {
        this.conditionsString = stringArray.join("、");
      }
    },

    getAllCheckedSkinsName() {
      const allCheckedSkins = this.allSkins.filter((skin) => {
        return this.checkedSkinIds.includes(skin.skinId);
      });
      const allCheckedSkinsName = allCheckedSkins.map((skin) => {
        return skin.name;
      });
      return Array.from(new Set(allCheckedSkinsName)).join("，");
    },

    // 段位筛选
    selectDw(item) {
      if (!item.checked) {
        this.$set(item, "checked", true);
        this.checkedJobLevels.push(item.jobLevel);
      } else {
        this.$set(item, "checked", false);
        this.checkedJobLevels.splice(
          this.checkedJobLevels.indexOf(item.jobLevel),
          1
        );
      }
      this.getConditionsString();
    },
    setSelectdHero(hero) {
      this.selectedHero = hero;
    },
    // 判断所在行有英雄被点击
    inHeroGroup(heroGroup) {
      let matchHero = heroGroup.filter(
        (hero) => this.selectedHero && hero.heroId === this.selectedHero.heroId
      );
      return matchHero.length > 0;
    },
    // 动态计算皮肤框高度
    getSkinWrapHeight(heroGroup) {
      if (!this.inHeroGroup(heroGroup)) return 0;
      return Math.ceil(this.selectedHero.skins.length / 4) * 95;
    },
    // 重置筛选器条件
    resetSelector() {
      this.priceRangeValue = [0, 100];
      this.heroRangeValue = [0, 100];
      this.skinRangeValue = [0, 100];
      this.checkedLevels = [];
      this.checkedSkinIds = [];
      this.checkedJobLevels = [];
      this.jobLevels.forEach((item) => {
        this.$set(item, "checked", false);
      });
      this.priceMax = ''
      this.priceMin = ''
      this.heroMax = ''
      this.heroMin = ''
      this.skinMax = ''
      this.skinMin = ''
      // if (!flag) {
      //   this.$emit('resetParam')
      // }
    },
    checkSort(sort) {
      this.sortChecked = sort;
      this.$emit("sort", this.sortChecked.id);
      this.showSort = false;
    },
    selectorSubmit() {
      const conditions = {};
      if (this.priceMin !== '' && this.priceMax !== '') {
        if (Number(this.priceMax) > this.priceRange.max ) {
          return this.$message({
              type: 'error',
              message: '最高价格不能大于账号最高价格'
          })
        }
        if (Number(this.priceMin) >= Number(this.priceMax)) {
          return this.$message({
              type: 'error',
              message: '最低价格不能高于最高价格'
          })
        }
        conditions["gemRange"] = {
          min: this.priceMin * 100,
          max: this.priceMax * 100,
        };
      }
      
      if (this.heroMin !== '' && this.heroMax !== '') {
        if (Number(this.heroMax) > this.heroCountRange.max ) {
          return this.$message({
              type: 'error',
              message: '英雄最高数量不能大于账号最高数量'
          })
        }
        if (Number(this.heroMin) >= Number(this.heroMax)) {
          return this.$message({
              type: 'error',
              message: '英雄最低数量不能大于最高数量'
          })
        }
        conditions["heroCountRange"] = {
          min: this.heroMin,
          max: this.heroMax,
        };
      }
      
      if (this.skinMin !== '' && this.skinMax !== '') {
        if (Number(this.skinMax) > this.skinCountRange.max ) {
          return this.$message({
              type: 'error',
              message: '皮肤最高数量不能大于账号最高数量'
          })
        }
        if (Number(this.skinMin) >= Number(this.skinMax)) {
          return this.$message({
              type: 'error',
              message: '皮肤最低数量不能大于最高数量'
          })
        }
        conditions["skinCountRange"] = {
          min: this.skinMin,
          max: this.skinMax,
        };
      }
      // if (
      //   this.getRangeValue(this.priceRangeValue, this.priceRange) !== "不限"
      // ) {
      //   // 价格区间
      //   conditions["priceRange"] = {
      //     min: Math.floor(
      //       this.getValue(this.priceRangeValue[0], this.priceRange)
      //     ),
      //     max: Math.floor(
      //       this.getValue(this.priceRangeValue[1], this.priceRange)
      //     ),
      //   };
      // }
      // if (
      //   this.getRangeValue(this.heroRangeValue, this.heroCountRange) !== "不限"
      // ) {
      //   // 英雄数量区间
      //   conditions["heroCountRange"] = {
      //     min: Math.floor(
      //       this.getValue(this.heroRangeValue[0], this.heroCountRange)
      //     ),
      //     max: Math.floor(
      //       this.getValue(this.heroRangeValue[1], this.heroCountRange)
      //     ),
      //   };
      // }
      // if (
      //   this.getRangeValue(this.skinRangeValue, this.skinCountRange) !== "不限"
      // ) {
      //   // 皮肤数量区间
      //   conditions["skinCountRange"] = {
      //     min: Math.floor(
      //       this.getValue(this.skinRangeValue[0], this.skinCountRange)
      //     ),
      //     max: Math.floor(
      //       this.getValue(this.skinRangeValue[1], this.skinCountRange)
      //     ),
      //   };
      // }
      if (this.checkedLevels.length > 0) {
        // 贵族等级
        conditions["vips"] = this.checkedLevels;
      }
      if (this.checkedSkinIds.length > 0) {
        // 英雄皮肤
        conditions["skinIds"] = this.checkedSkinIds;
      }
      if (this.checkedJobLevels.length > 0) {
        // 英雄皮肤
        conditions["jobLevels"] = this.checkedJobLevels;
      }
      this.$emit("submit", conditions);
      this.showFilter = false;
    },
  },
};
</script>
<style lang="scss">
body.hidden {
  height: 100vh;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.hero-trade-selector {
  .select-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /deep/ .el-input {
      width: 80px;
      margin-right: 20px;
    }
  }
  &.radius {
    border-radius: 16px !important;
  }
  .options {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    background: #fff;
  }

  .sort-btn,
  .filter-btn {
    width: 63px;
    height: 40px;
    font-size: 12px;
    font-weight: 500;
    color: #1c202c;
    line-height: 40px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    transition: all 200ms;

    i {
      display: inline-block;
      width: 8px;
      height: 5px;
      background-image: url("./img/select.png");
      background-size: 8px 5px;
      margin-left: 4px;
    }

    &.active,
    &.open {
      color: #00bf3c;

      i {
        background-image: url("./img/select-active.png");
      }
    }

    &.active i {
      transform: rotate(180deg);
    }

    &.open i {
      transform: rotate(0deg) !important;
    }
  }

  .filter-btn {
    width: 230px;

    span {
      text-align: right;
      width: 210px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .panel-wrap {
    // position: absolute;
    // top: 40px;
    // left: 0;
    // right: 0;
    border-top: 1px solid #eee;
    background: #ffffff;
    border-radius: 0px 0px 16px 16px;
    z-index: 10;
    overflow: hidden;
    padding-top: 20px;
    .placeholder {
      height: 30px !important;
    }
    .sort-panel {
      height: 126px;
      overflow: auto;

      .sort-item {
        height: 38px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #1c202c;
        line-height: 38px;

        i {
          display: inline-block;
          width: 42px;
          height: 10px;
          background-image: url("./img/sort-check.png");
          background-size: 10px 7px;
          background-repeat: no-repeat;
          background-position: center;
          visibility: hidden;
        }

        &.checked {
          color: #00bf3c;

          i {
            visibility: visible;
          }
        }
      }
    }

    .panel {
      .main-area {
        height: 400px;
        display: flex;
        flex-flow: row nowrap;
        overflow: auto;
        cursor: pointer;
        .sidebar {
          width: 80px;
          height: 400px;
          background: rgba(42, 45, 75, 0.06);

          .sidebar-item {
            position: relative;
            height: 50px;
            font-size: 14px;
            font-weight: 400;
            line-height: 50px;
            text-align: center;
            color: rgba(0, 0, 0, 0.6);

            i {
              display: inline-block;
              position: absolute;
              top: 50%;
              left: 3px;
              transform: translateY(-50%);
              width: 5px;
              height: 5px;
              background: #e74a4a;
              border-radius: 50%;
            }

            &.active {
              background: #ffffff;
              color: #00bf3c;
            }
          }
        }

        .content {
          flex: 1;
        }

        .dw-selector-content {
          padding: 16px 33px;
          height: 330px;
          overflow-y: scroll;
          .dw-list {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-radius: 8px;
            border: 1px solid #bababa;
            margin-bottom: 12px;
            overflow: hidden;
            img {
              display: inline-block;
              width: 70px;
              height: 40px;
            }
            .title {
              padding: 13px 45px 13px 28px;
              height: 40px;
              font-size: 14px;
              font-weight: 500;
              color: rgba(28, 32, 44, 0.6);
              text-align: center;
              line-height: 1;
            }
          }
          .dw-list-active {
            background: rgba(229, 248, 235, 1);
            border: 1px solid #00bf3c;
          }
        }

        .hero-selector-content {
          .content-header {
            width: 354px;
            overflow-y: scroll;

            .wrap {
              display: flex;
              flex-shrink: 0;
              flex-flow: row nowrap;
              width: 371px;
              margin: 0 6px;
              padding: 3px 0;
            }

            .job-item {
              margin: 1px 4px;
              width: 64px;
              height: 28px;
              background: rgba(42, 45, 75, 0.06);
              border-radius: 8px;
              text-align: center;
              line-height: 28px;
              font-size: 12px;
              font-weight: 400;
              color: rgba(28, 32, 44, 0.4);

              &.active {
                background: rgba(0, 191, 60, 0.1);
                color: rgba(0, 191, 60, 1);
              }
            }
          }

          .content-main {
            width: 354px;
            height: 350px;
            overflow-x: hidden;

            .hero-item-row {
              padding: 0 5px;
              display: flex;
              flex-flow: row wrap;
              justify-content: flex-start;
              margin: 3px 0;
              background-color: #ffffff;
            }

            .hero-item {
              position: relative;
              width: 67.5px;
              height: 85px;
              display: flex;
              flex-shrink: 0;
              flex-flow: column nowrap;
              justify-content: space-around;
              align-items: center;
              background-color: #ffffff;
              flex-shrink: 0;

              .hero-icon {
                width: 56px;
                height: 56px;
                margin-top: 2px;
                position: relative;
                .count-wrap {
                  display: none;
                }

                img {
                  width: 100%;
                  height: 100%;
                  flex-shrink: 0;
                  border-radius: 4px;
                }
              }

              span {
                font-size: 12px;
                font-weight: 400;
                color: rgba(28, 32, 44, 0.6);
                zoom: 0.8;
              }

              &.checked {
                .hero-icon {
                  position: relative;

                  &::after {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    content: "";
                    width: 56px;
                    height: 56px;
                    background: rgba(0, 191, 60, 0.15);
                    /* box-shadow: 0px 0px 10px 0px #0D9036; */
                    border-radius: 4px;
                    border: 2px solid #00bf3c;
                  }

                  .count-wrap {
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 13px;
                    padding: 0 4px;
                    background: #00bf3c;
                    border-radius: 0px 4px 0px 4px;
                    font-size: 9px;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 13px;

                    &::before {
                      display: block;
                      content: "";
                      width: 10px;
                      height: 9px;
                      background-image: url("./img/skin.png");
                      background-size: 10px 9px;
                      margin-right: 3px;
                    }
                  }
                }
              }

              &.selected {
                background-color: #edeeef;
                border-radius: 8px 8px 0px 0px;

                &::before,
                &::after {
                  content: "";
                  width: 10px;
                  height: 10px;
                  border-radius: 0 0 10px 0;
                  position: absolute;
                  bottom: -4px;
                  left: -6px;
                  border-right: 4px solid #edeeef;
                  border-bottom: 4px solid #edeeef;
                  z-index: 1;
                }

                &::after {
                  border-radius: 0 0 0 10px;
                  left: auto;
                  right: -6px;
                  border: none;
                  border-left: 4px solid #edeeef;
                  border-bottom: 4px solid #edeeef;
                }
              }

              &:nth-child(1) {
                &.selected {
                  background-color: #edeeef;

                  &::before {
                    content: "";
                    border-radius: 0;
                    background: #edeeef;
                    border: none;
                    bottom: -3px;
                    left: 0px;
                    z-index: 1;
                  }
                }
              }

              &:nth-child(4) {
                &.selected {
                  background-color: #edeeef;

                  &::after {
                    content: "";
                    border-radius: 0;
                    background: #edeeef;
                    border: none;
                    bottom: -3px;
                    right: 0px;
                    z-index: 1;
                  }
                }
              }
            }

            .skin-wrap {
              position: relative;
              top: -1px;
              background-color: #edeeef;
              width: 100%;
              display: flex;
              flex-flow: row wrap;
              justify-content: flex-start;
              overflow: hidden;
              transition: height 300ms;
              border-radius: 5px;

              .hero-item {
                width: 67.5px;
                margin: 0;
                background-color: transparent;

                .label-icon {
                  height: 16px;
                  position: absolute;
                  top: -4px;
                  right: -4px;
                  z-index: 1;

                  img {
                    width: auto;
                    height: 16px;
                  }
                }
              }
            }
          }
        }

        .range-selector-content {
          // width: 271px;
          height: 400px;
          overflow-y: scroll;

          .block-item {
            height: 133px;
            padding: 0 16px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            border-bottom: 1px solid rgba(228, 228, 228, 0.5);

            .range-text-wrap {
              height: 50px;
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              align-items: flex-start;

              .title {
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.6);
                line-height: 12px;
              }

              .value {
                font-size: 14px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 12px;

                &.price {
                  font-size: 16px;
                  color: #e74a4a;

                  span {
                    font-size: 12px;
                    font-weight: bold;
                    color: #e74a4a;
                  }
                }
              }
            }
          }

          .custom-slider-button {
            width: 32px;
            height: 32px;
            background-image: url("./img/slider.png");
            background-size: 32px 32px;
          }
        }

        .level-selector-content {
          width: 271px;
          overflow-y: hidden;
          display: flex;
          flex-flow: row wrap;
          padding: 0 6px;

          .level-selector {
            width: 78px;
            height: 32px;
            margin: 4px;
            background: rgba(42, 45, 75, 0.06);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(28, 32, 44, 0.6);
            line-height: 32px;
            text-align: center;

            &.active {
              background: rgba(0, 191, 60, 0.1);
              color: #00bf3c;
            }
          }
        }
      }

      .bottom-area {
        height: 64px;
        background: #ffffff;
        padding: 0 8px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;

        .reset-btn {
          width: 120px;
          height: 40px;
          border-radius: 8px;
          border: 1px solid rgba(42, 45, 75, 0.4);
          font-weight: 500;
          color: rgba(28, 32, 44, 0.8);
          line-height: 40px;
          text-align: center;
        }

        .enter-btn {
          width: 216px;
          height: 40px;
          background: #00bf3c;
          border-radius: 8px;
          border: 1px solid #00bf3c;
          font-weight: 500;
          color: #fff;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }

  .mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
</style>
